<template>
	<view class="flex_r flex_c text-box">
		<view>
			<view class="text_30 size_white text" :class="[{ text_: item.had_draw || item.isClick }, { text_r: isMy }, { text_l: !isMy }]" @tap.stop="onClick">
				<!-- <view class="red_packet_bg_mini">
					<image class="img" :src="item.payload.red_packet_bg_mini" mode="aspectFill"></image>
				</view> -->
				<view class="flex_r z_index2 redPacket-row">
					<view class="redPacket-icon">
						<!-- 开启 -->
						<image
							class="img"
							src=""
							mode="aspectFill"
							v-if="item.had_draw || item.isClick"
						></image>

						<!-- 未开启 -->
						<image
							class="img"
							src=""
							mode="aspectFill"
							v-else
						></image>
					</view>
					<view class="flex1 flex_c fj_a z_index2 nowrap_ redPacket-title">
						<view class="nowrap_ text_34 bold_">{{ item.payload.remark }}</view>
						<view class="text_24" style="margin-top: 6rpx" v-if="item.had_draw && item.payload.type !== 'exclusive'">已领取</view>

						<view class="text_24" style="margin-top: 6rpx" v-if="item.payload.type === 'exclusive'">
							{{ item.payload.exclusive.name || item.payload.exclusive.realname }}
							{{ item.had_draw ? '已领取' : '的专属红包' }}
						</view>
					</view>
				</view>
				<view class="m-line">
					<m-line color="rgba(255, 255, 255, 0.4)" width="100%" margin="20rpx auto 6rpx auto" :hairline="true"></m-line>
				</view>
				<view class="text_24 redPacket-text">{{ item.payload.account_type_text }}</view>
			</view>
		</view>

		<!-- 你的专属红包 -->
		<view class="text_22 color__ flex_r fa_c exclusive" v-if="item.payload.type === 'exclusive' && item.payload.exclusive.member_id === myid">
			这是你的专属红包
			<view class="label-icon">
				<image
					class="img"
					src=""
					mode="aspectFill"
				></image>
			</view>
		</view>
		<view class="icon_ redPacket" v-if="item.had_draw">
			<view class="redPacket-icon">
				<image
					class="img"
					src=""
					mode="heightFix"
				></image>
			</view>
			<view class="text_24 color__" v-if="item.senderData.name">你领取了{{ item.senderData.name }}的红包</view>
			<view class="text_24 color__" v-else>你领取了红包</view>
		</view>
	</view>
</template>

<script>
import { show } from '@/utils/chat.js';
import mLine from '@/components/m-line/m-line.vue';
export default {
	components: { mLine },
	props: {
		myid: {
			type: [String, Number],
			default: null
		},
		isMy: {
			type: [Boolean, Number],
			default: false
		},
		value: {
			type: Object,
			default: {}
		}
	},
	created() {
		// console.log(this.value);
		// this.infr();
	},
	data() {
		return {
			item: {},
			pageObj: {}
		};
	},
	watch: {
		value: {
			handler: function (newV) {
				this.item = newV;
				// this.infr();
			},
			immediate: true
		}
	},
	methods: {
		onClick() {
			this.$emit('onClick');
		},
		async infr() {
			const res = await this.API_red_view(this.value.payload.message_id);
			if (res) {
				const data = res.data.data;
				this.item.had_draw = data.had_draw;
			}
		},
		API_red_view(message_id) {
			return new Promise((res) => {
				http.get(
					'Group/red_view',
					{
						message_id
					},
					true,
					(r) => {
						if (r.data.code == 0) return res(r);
						return res(false);
					}
				);
			});
		}
	}
};
</script>

<style scoped lang="scss">
.text {
	position: relative;
	z-index: 99;
	box-sizing: border-box;
	width: 490rpx;
	min-height: 180rpx;
	padding: 22rpx 30rpx 0 30rpx;
	border-radius: 10rpx;
	background-color: #fa9e3b;
	.red_packet_bg_mini {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		overflow: hidden;
		opacity: 0.2;
		border-radius: 10rpx;
	}

	.redPacket-row {
		width: 100%;
		min-height: 94rpx;
		.redPacket-icon {
			width: 76rpx;
			height: 88rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin-right: 26rpx;
		}
		.redPacket-title {
		}
	}
	.m-line {
	}
	.redPacket-text {
		width: 100%;
		min-height: 30rpx;
		padding: 4rpx 0 6rpx 0;
		font-weight: 300;
	}
}

.text_r {
	position: relative;
}
.text_l {
	position: relative;
}

.text_r::after {
	position: absolute;
	z-index: -1;
	content: '';
	top: 26rpx;
	right: -8rpx;
	width: 18rpx;
	height: 18rpx;
	border-radius: 2px;
	transform: rotate(45deg);
	background-color: #fa9e3b;
}
.text_l::after {
	position: absolute;
	z-index: -1;
	content: '';
	top: 26rpx;
	left: -8rpx;
	width: 18rpx;
	height: 18rpx;
	border-radius: 2px;
	transform: rotate(45deg);
	background-color: #fa9e3b;
}
.text_ {
	background-color: #fde2c4;
}

.text_::after {
	background-color: #fde2c4;
}

.text-box {
}

.exclusive {
	width: 100%;
	flex-direction: row-reverse;
	margin-top: 2rpx;
	.label-icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}
}

.redPacket {
	width: 100%;
	height: 80rpx;

	.redPacket-icon {
		height: 34rpx;
		border-radius: 4px;
		margin: 0 12rpx 0 0;
		overflow: hidden;
	}
}
</style>
